import Vue from 'vue'
import Vuex from 'vuex'
import {
  INCREMENT
} from './mutations-types'

// 1.安装插件 
Vue.use(Vuex)

// 2.创建对象
// 分模块 
const moduleA = {
  state: {
    name: '落十一'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  actions: {
    aUpdateName(context) {
      // context  上下文
      console.log(context)
      setTimeout(() => {
        context.commit('updateName', '霓漫天')
      }, 1000);
    }

    // ES6语法，对象的解构  写法
    // 从context对象中取要用的这三个属性{state, commit, rootState}
    // aUpdateName({state, commit, rootState}}) {

    // }

  },
  getters: {
    fullname(state) {
      console.log(state)
      return state.name + '11111111'
      
    },
    fullname2(state, getters) {
      return getters.fullname + '2222222'
    },
    fullname3(state, getters, rootState) {
      // module 模块中getters可以获取到根目录的state
      return getters.fullname2 + rootState.counter
    }
  }
}
const moduleB = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

const store = new Vuex.Store({
  state: {
    // 保存状态
    counter: 10,
    students:[
      {id: 1, name: '张三', age: 17},
      {id: 2, name: '李四', age: 14},
      {id: 3, name: '王五', age: 21},
      {id: 4, name: '赵二', age: 35},
      {id: 5, name: '刘一', age: 61}
    ],
    info:{
      name: 'why',
      age: 18,
      height: 171
    }

  },
  mutations:{
    // 方法    默认参数state
    [INCREMENT](state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
    // 传递单个参数
    addCount(state,count) {
      state.counter += count;
      
      // 特殊方式传递时 count为对象 {type: "addCount", count: 5}
      // 此时count 最好取名为payload
      // state.counter += count.count

    },
    // 传递多个参数通过对象传递 
    addStudent(state,student) {
      // state.students.push({id: 6, name: '七七', age: 22})
      state.students.push(student)
    },
    updateInfo(state) {
      // state.info.name = "coderWhy"
      // 未提前定义的值修改，不是响应式，不会刷新
      // state.info['address'] = '洛杉矶'

      // 如果想要刷新修改方式
      //  set(要修改的对象，索引值，修改后的值)
      // Vue.set(state.info, 'address', '洛杉矶')

      // // 删除属性  
      // delete state.info.age   // 该方式无法坐到响应式
      // Vue.delete(state.info, 'age')  // 响应式方式


      // Mutation中异步请求仍然可以修改，但是devtools不能跟踪记录
      // Mutation 中不要使用异步操作，若是需要异步请求，可以在Action中操作
      
      // setTimeout(() => {      //错误代码，不能在这里异步操作
      //   state.info.name = "coderWhy"
      // }, 1000);

      state.info.name = "coderWhy"

    }


  },
  actions:{
    // context上下文   这里context 为store

    // 如果异步操作需要在这里操作
    // aUpdateInfo(context,payload) {
    //   setTimeout(() => {
    //     // 修改state 的唯一途径就是通过mutation 不能直接修改state
    //     context.commit('updateInfo')
    //     // console.log(payload)
    //     console.log(payload.message)
    //     payload.success()
    //   }, 1000);
    // }


    // 更优雅的写法
    aUpdateInfo(context,payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('updateInfo')
          console.log(payload)
          resolve('1234567489')
        }, 1000);
      })
    }

  },
  getters: {
    // 相当于组件中的计算属性
    powerCounter(state) {
      return state.counter * state.counter
    },

    // 获取年龄超过20岁的学生
    more20student(state){
      return state.students.filter(s => s.age >= 20)
    },

    // 获取年龄超过20的学生个数 
    more20Length(state){
      return state.students.filter(s => s.age >= 20).length
    },
    // 传递getters参数的方式获取超过20岁的学生数量
    more20LengthTwo(state, getters) {
      return getters.more20student.length
    },
    // 获取大于某个年龄的学生个数  ，年龄可以修改

    moreAge(state) {
      // return function(age) {
      //   return state.students.filter(s => s.age >= age)
      // }
      return age => {
        return state.students.filter(s => s.age >= age)
      }
    }
  },
  modules: {
    // 分模块
    a: moduleA,
    b: moduleB
    

  }
})

// 3.导出store对象
export default store